<div data-jc-controller="Pages" data-jc-scope="pages" class="container">
	<div class="toolbar">
		<button class="right exec hidden-xs" data-exec="Pages/create"><i class="fa fa-plus-circle"></i>@(Create)</button>
		<button class="exec" data-exec="Pages/options"><i class="fa fa-cogs"></i>@(Options)</button>
		<div data-b="common.dependencies.navigations" data-b-visible="value && value.length > 0" class="hidden">
			<span></span>
			<button class="exec b" data-exec="Pages/navigation"><i class="fa fa-sitemap"></i>@(Navigation)</button>
		</div>
		<span></span>
		<div class="hidden-xs">
			<button class="exec" data-exec="Pages/globals"><i class="fa fa-clone"></i>@(Globals)</button>
			<span></span>
		</div>
		<button class="exec" data-exec="Pages/checked" name="checked" disabled="disabled"><i class="fa fa-check-circle"></i>@(Checked)</button>
	</div>
	<div class="fullheight">
		<div data-jc="grid" data-jc-path="grid" data-jc-config="padding:10;filterlabel:@(Search);checked:Pages/checkbox;button:Pages/operation">
			<script type="text/plain">
			[
				{ name: 'id', text: '', template: '<input type="checkbox" value="{{ id }}" />', size: '36px', header: '<input type="checkbox" value="{{ id }}" />', filter: false, sort: false, title: 'Options', align: 'center' },
				{ name: 'path', text: '@(Name)', size: 2, template: '{{ if icon }}<i class="fa fa-{{ icon }} mr5"></i>{{ fi }}{{ path | pagespath }}{{ if ispartial }}<span class="badge badge-green ml5">@(partial)</span>{{ fi }}', classth: 'left', classfilter: 'left' },
				{ name: 'url', text: '@(URL address)',  template: '{{ if ispartial }}<span class="silver">{{ url }}</span>{{ else }}{{ url }}{{ fi }}', size: 1, class: 'hidden-xs' },
				{ name: '@(Options)', filter: false, align: 'right', sort: false, size: '140px', template: '{{ if !ispartial }}<a href="{{ url }}" class="fs11 mr5" target="_blank">@(show)</a>{{ fi }}<button title="@(Duplicate)" name="duplicate"><i class="fa fa-copy"></i></button><button name="update" title="@(Edit)"><i class="fa fa-pencil"></i></button><button class="btn-remove" name="remove" title="@(Remove)"><i class="fa fa-trash-o"></i></button>' }
			]
			</script>
		</div>
	</div>
</div>
<div data-jc="importer" data-jc-path="common.form" data-jc-config="if:pages-form;url:[url]forms/pages.html" data-jc-controller="Pages"></div>
<div data-jc="importer" data-jc-path="common.form" data-jc-config="if:pages-navigation;url:[url]forms/pages-navigation.html" data-jc-controller="Pages"></div>
<div data-jc="importer" data-jc-path="common.form2" data-jc-config="if:pages-navigation-item;url:[url]forms/pages-navigation-item.html" data-jc-controller="Pages"></div>

<script>
	CONTROLLER('Pages', function(ctrl) {

		ctrl.scope = 'pages';

		var toolbar = ctrl.virtualize({ btnChecked: '.toolbar button[name="checked"]' });

		ctrl.destroy = function() {
			SETTER('sitemap', 'remove', ctrl.scope);
		};

		ctrl.refresh = function() {
			SETTER('loading', 'show', 'refresh fa-spin');
			AJAX('GET [url]api/{0}/'.format(ctrl.scope), function(response) {

				for (var i = 0, length = response.items.length; i < length; i++) {
					var item = response.items[i];
					var parent = item.parent;
					var path = item.name;
					var is = false;

					while (parent) {

						var sub = response.items.findItem('id', parent);
						if (!sub)
							break;

						if (sub.url === '/')
							break;

						path = sub.name + ' / ' + path;
						parent = sub.parent;
						is = true;
					}

					item.path = path;
				}


				ctrl.set('grid', response);
				SETTER('loading', 'hide', 500);
			});
		};

		// Public methods
		ctrl.reload = function() {
			ctrl.refresh();
		};

		ctrl.operation = function(btn, row, grid) {
			var name = btn.prop('name');
			switch (name) {
				case 'remove':
					SETTER('confirm', 'show', '@(Are you sure you want to remove selected page?)', ['"trash"@(Remove)', '@(No)'], function(index) {
						if (index)
							return;
						SETTER('loading', 'show');
						AJAX('DELETE [url]api/{0}/'.format(ctrl.scope), row, function(response) {
							SETTER('loading', 'hide', 1000);
							if (response.success) {
								SETTER('snackbar', 'success', '@(Page has been removed successfully.)');
								ctrl.refresh();
							}
						});
					});
					break;
				case 'update':
				case 'duplicate':
					SETTER('loading', 'show', 'pencil');
					AJAX('GET [url]api/{0}/{1}/'.format(ctrl.scope, row.id), function(response) {

						if (name === 'duplicate')
							response.id = '';
						else
							SKIP(ctrl.scope + '.form.stats');

						SET('cmseditor.template', response.template);
						SET(ctrl.scope + '.form', response, true);
						SET('common.form', ctrl.scope + '-form');
					});
					break;
			}
		};

		ctrl.checkbox = function(el, grid) {
			el && !el.value && grid.checked(el.checked);
			var count = grid.checked().length;
			toolbar.btnChecked.disable(count === 0);
		};

		ctrl.checked = function(el) {
			var items = [];
			items.push({ id: 'remove', name: '@(Remove pages)', icon: 'trash' });
			SETTER('contextmenu', 'show', 'center', el, items, function(item) {
				switch (item.id) {
					case 'remove':
						SETTER('confirm', 'show', '@(Are you sure you want to remove all selected pages?)', ['"trash"@(Remove)', '@(No)'], function(index) {
							if (index)
								return;
							SETTER('loading', 'show', 'trash-o');
							var arr = FIND('.{0}.grid'.format(ctrl.scope)).checked().toArray();
							arr.waitFor(function(el, next, index) {
								SET('common.progress', (index / arr.length) * 100);
								AJAX('DELETE [url]api/{0}/'.format(ctrl.scope), { id: el.value }, next);
							}, function() {
								ctrl.refresh();
								SETTER('loading', 'hide', 1000);
								SETTER('snackbar', 'success', '@(Pages have been removed successfully.)');
							});
						});
						break;
				}
			}, 0, 5);
		};

		ctrl.options = function(el) {
			var items = [];
			items.push({ id: 'refresh', name: '@(Refresh)', icon: 'refresh' });
			items.push({ id: 'create', name: '@(Create page)', icon: 'plus-circle' });
			items.push({ id: 'navigation', name: '@(Navigation)', icon: 'sitemap' });
			items.push({ id: 'globals', name: '@(Globals)', icon: 'clone' });
			SETTER('contextmenu', 'show', 'left', el, items, function(item) {
				ctrl[item.id]();
			}, 0, 5);
		};

		ctrl.globals = function(el) {
			SET(ctrl.scope + '.formglobals', {}, true);
			SET('common.form', ctrl.scope + '-globals');
		};

		ctrl.navigation = function(el) {

			var items = CLONE(common.dependencies.navigations);
			for (var i = 0; i < items.length; i++)
				items[i].icon = 'sitemap';

			SETTER('contextmenu', 'show', 'center', el, items, function(item) {
				SETTER('loading', 'show');
				AJAX('GET [url]api/nav/{0}/'.format(item.id), function(response) {
					SETTER('loading', 'hide', 1000);
					SET(ctrl.scope + '.navigation', response, true);
					SET('common.form', ctrl.scope + '-navigation');
				});
			}, 0, 5);
		};

		ctrl.create = function() {
			ctrl.set('form', { widgets: [], ispartial: false, navicon: true, navname: true, replacelink: true, url: '---' }, true);
			SET('common.form', ctrl.scope + '-form');
		};

		ctrl.globals = function(el) {
			var items = [];
			items.push({ value: 'pages-globals', name: '@(Variables)', icon: 'cog' });
			items.push({ value: 'widgets-globals', name: '@(Global style/script)', icon: 'paint-brush' });
			SETTER('contextmenu', 'show', 'left', el, items, function(item) {
				SET('common.form', item.value);
			}, 8, 5);
		};

	});

	Tangular.register('pagespath', function(value) {
		var arr = value.split('/');
		var builder = [];

		for (var i = 0; i < arr.length - 1; i++) {
			var path = arr[i];
			builder.push('<span class="silver">{0} /</span>'.format(path.trim()));
		}

		return (builder.length ? (builder.join('')) : '') + arr.last();
	});

</script>